<template>
  <div class="container-pie">
    <div ref="echartsBox" class="echarts-box"></div>
    <div class="status-text">{{ params.statusName }}</div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, defineProps } from 'vue'
import commomOption from './commomOption.ts'
import * as echarts from 'echarts'
const colorMap = [
  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: '#02CEFC' },
    { offset: 1, color: '#0272ED' }
  ]),
  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: '#f87fd4' },
    { offset: 1, color: '#52cee2' }
  ]),
  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: '#fcea1b' },
    { offset: 1, color: '#8ff193' }
  ]),
  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: '#FC6679' },
    { offset: 1, color: '#8bb581' }
  ]),

  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: '#7FC268' },
    { offset: 1, color: '#0BBBB7' }
  ]),
  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: '#E7B115' },
    { offset: 1, color: '#F5814C' }
  ])
]
const props = defineProps(['params'])

const { proxy } = getCurrentInstance()
const echartsBox = ref()
function echartInit(option) {
  nextTick(() => {
    let myChart = proxy.$echarts.init(echartsBox.value)

    option && myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  })
}

watch(
  () => props.params,
  (params, oldVal) => {
    const option = {
      title: {
        text: params.value + '{a|%}',
        textStyle: {
          color: 'rgba(165, 178, 200, 1)',
          fontSize: 26,
          fontWeight: 'bolder',
          rich: {
            a: {
              fontSize: 10,
              verticalAlign: 'bottom',
              lineHeight: .5,
              padding: [0, 0, 3, 3]
            }
          }
        },
        subtext: params.statusText,
        subtextStyle: {
          color: '#A5B2C8',
          fontSize: 12,
        },
        itemGap: 0, // 主副标题距离
        left: 'center',
        top: 'center',
      },
      grid: {
        top: '0px',
        left: '0px',
        right: '0px',
        bottom: '0px'
      },
      radius: '100%',
      angleAxis: {
        max: 100, // 满分
        clockwise: false, // 逆时针
        // 隐藏刻度线
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      radiusAxis: {
        type: 'category',
        // 隐藏刻度线
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      polar: {
        center: ['50%', '50%'],
        radius: '150%' //图形大小
      },
      series: [
        {
          type: 'bar',
          data: [
            {
              name: '',
              value: params.value,
              itemStyle: {
                color: colorMap[params.color]
              }
            }
          ],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 9,
          barGap: '-100%', // 两环重叠
          z: 2
        },
        {
          // 灰色环
          type: 'bar',
          data: [
            {
              value: 100,
              itemStyle: {
                color: 'rgba(116, 160, 194, 1)',
                shadowColor: 'rgba(116, 160, 194, .1)',
                shadowBlur: 5,
                shadowOffsetY: 2
              }
            }
          ],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 9,
          barGap: '-100%', // 两环重叠
          z: 1
        }
      ]
    }
    echartInit(option)
  }, 
  { deep: true, immediate: true }
)
</script>
<style lang="less" scoped>
@import url(./container.less);
</style>
